import { type } from '../../../auto-imports';
<template>
  <div class="container" @dragover.prevent :class="{ lx_transform: transform || true }">
    <template v-if="slots.item">
      <div
        v-for="(item, i) in listRef"
        :key="item"
        draggable="true"
        @dragover.prevent
        @dragenter.prevent="dragenter($event, i)"
        @dragend.prevent="dragend($event, i)"
      >
        <slot name="item" :item="{ $index: i, data: item }"></slot>
      </div>
    </template>
    <slot name="default"> </slot>
  </div>
</template>

<script setup lang="ts" name="tuozhuai">
const slots = useSlots()
const emit = defineEmits(['change'])

const props = defineProps<{
  list: Array<any>
  transform?: boolean
}>()
const drag = (e: any) => {
  console.log(e)
}
const listRef = ref(props.list)
const activeIndexref = ref() // 开始拖拽的索引
const dragenter = (e: any, index) => {
  //这里的index是当前鼠标所在的的索引
  // console.log(e, index, 'dragenter')
  activeIndexref.value = index
}
const dragend = (e: any, index) => {
  // console.log(e, index, 'dragend')
  if (activeIndexref.value !== index) {
    // 拖拽结束两个进行交换
    const activeItem = listRef.value[activeIndexref.value]
    const currentItem = listRef.value[index]
    listRef.value[activeIndexref.value] = currentItem
    listRef.value[index] = activeItem
    emit('change', listRef.value)
  }
}
</script>

<style lang="scss" scoped>
.lx_transform {
  transition: 0.5s all;
}
</style>
